// Mixins
$colorMap: (
  'error': (
    #fff0ed,
    #ffd8d3,
    #ffb8b1,
    #ff928c,
    #ff5756,
    #dc4243,
    #b32d30,
    #8c171d,
    #6b000b,
    #480005
  ),
  'success': (
    #e0fbe2,
    #c2f4ca,
    #8cdda0,
    #24c66d,
    #16a659,
    #008944,
    #006d35,
    #005427,
    #003c1a,
    #00260e
  ),
  'warning': (
    #fff1e7,
    #ffdabc,
    #ffba7d,
    #fd9b3b,
    #d67c1b,
    #b26100,
    #8c4b00,
    #6a3700,
    #4d2700,
    #381a00
  ),
  'brand': (
    #eef4ff,
    #cfe4ff,
    #a0ccff,
    #65b2ff,
    #0499fc,
    #007bcf,
    #0061a5,
    #00487d,
    #00325a,
    #00213e
  )
);

/*
  生成css色阶变量
 --td-brand-color: #0499fc;
 @include colorPalettes('brand');
*/

@mixin colorPalettes($key) {
  $list: map-get(
    $map: $colorMap,
    $key: $key
  );
  @if type-of($value: $list) == 'list' {
    @for $i from 1 through length($list) {
      --td-#{$key}-color-#{$i}: #{nth($list, $i)};
    }
  }
}

/*
获取带有品牌色倾向的中性色
$color1 品牌色
$color2 中性色
$color1_scale 品牌色占比
$color2_scale 中性色占比
*/

@function averageColor(
  $color1,
  $color2,
  $color1_scale: 0.12,
  $color2_scale: 0.88
) {
  $r1: red($color1);
  $g1: green($color1);
  $b1: blue($color1);

  $r2: red($color2);
  $g2: green($color2);
  $b2: blue($color2);

  $r: round($color1_scale * $r1 + $color2_scale * $r2);
  $g: round($color1_scale * $g1 + $color2_scale * $g2);
  $b: round($color1_scale * $b1 + $color2_scale * $b2);

  @return rgb($r, $g, $b);
}

// 清除浮动

@mixin clearfix {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

// 自定义滚动条样式

@mixin scrollbar($size: 6px, $borderSize: 0) {
  // Firefox 等浏览器标准支持的滚动条样式设置
  // Chrome support after v121 https://developer.chrome.com/docs/css-ui/scrollbar-styling
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-color: var(--td-scrollbar-color) transparent;
    scrollbar-width: thin;
  }

  // Safari/Chrome 中滚动条样式设置
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--td-scrollbar-color);
    background-clip: content-box;
    border: $borderSize solid transparent;
    border-radius: $size * 2 - 1px;
  }

  // 滚动条比较窄，吸底时，实际操作点击选中比较困难，因此，增加滚动条需要悬浮态，引导用户使用和滚动
  &::-webkit-scrollbar-thumb:vertical:hover,
  &::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: var(--td-scrollbar-hover-color);
  }
}

// 隐藏滚动条，不兼容 IE 10 以下

@mixin hideScrollbar() {
  /* firefox */
  // Chrome support after v121 https://developer.chrome.com/docs/css-ui/scrollbar-styling
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-width: none;
    overflow: -moz-scrollbars-none;
  }

  /* IE 10+ */
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    /* Chrome Safari */
    display: none;
    width: 0 !important;
  }
}

/*
文本溢出
$line 最大文本行数，超出后显示...
*/

@mixin ellipsis($line: 1) {
  @if $list == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}

/*
媒体断点查询
*/

@mixin mediaRange($min-width, $max-width) {
  @media screen and (min-width: $min-width) and (max-width: $max-width) {
    @content;
  }
}
